<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style >
        #file{
            display: inline-block;
            background-color: #f5f5f5;
            border: solid 1px #dadada;
            position: relative;
            background-image: url("/assets/common/images/+.png");
            background-repeat:no-repeat ;
            background-position: center 0px;
            font-size: 12px;
            text-align: center;
            overflow: hidden;
            margin-right: 0px;
            line-height: 0px;
        }
        #file img{
            width: 100%;
        }
         input {

             opacity: 0;
             left: 0;
             top: 0;
             cursor: pointer;
         }
        div{
            cursor:pointer;
            margin: 3px;
            display: inline-block;
        }
        body{
            position: relative;
        }
        .buttonSub{
            display: inline-block;
            width: 80px;height: 35px;
            background-color: #01AAED;
            border-radius:10px;
            position: absolute;
            top:10px;
            right:100px;
        }
        .buttonClose{
            display: inline-block;
            width: 80px;height: 35px;
            background-color: #01AAED;
            border-radius:10px;
            position: absolute;
            top:10px;
            right:10px;
        }
        </style>
    <script src="../../../../assets/common/plugins/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        function abc(){//选中 本地图片 确认触发
            $("#fileForm").attr("action","/material/saveImg").submit();
        }
        function imgError(image){ //404 隐藏
            $(image).hide();
        }
        var ImgId;
        function imgclick(id,obj){//onmouseover  选择div改变颜色
            var s = $(obj);
        $(obj).css("border","3px red solid");
            $(obj).prevAll().css("border","3px #FFECCF solid ");
            $(obj).nextAll().css("border","3px #FFECCF solid ");
            ImgId=id;
        }
        var callbackdata = function () {//结束自动触发
            var data = {
                username: ImgId
            };
            return data;
        }

        $.post("/material/SelectImg",function (data) {
              var obj = eval("("+data+")");
              for(var key in obj){ //第一层循环取到各个list   onclick='imgclick("+obj[key].id+")' onerror='imgError(this);'
                  var _e="<img class='center' style='height: 100px;width: 100px;display:inline-block;'  src=/upload/"+obj[key].url+"   onerror='imgError(this);' />";
                  var de="<div   style='height: 100px;width: 100px;display:inline-block;border: #FFECCF solid 3px;' onclick=imgclick("+obj[key].id+",this)>" +_e +"</div>";
                  $("#center").append(de);//TwoLevelMenu
              }
          })
        </script>
</head>
<body>
            <form id="fileForm" action="" method="post"  enctype="multipart/form-data">
                <div id="file" style="display: inline-block;width: 50px;height: 50px ;">
                    <input type="file" name="idJustFile" onchange="abc()" style="margin-top:15px
                      ;display: inline-block" width="45px"  height="60px;"  >
                </div>
                <div id="center"> <span></span></div>
            </form>
</body>
</html>